
<head prefix="og: http://ogp.me/ns#">
	<title>BandName</title>

	<meta charset="utf-8" />
    <meta name="theme-color" content="black" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta name="description" content="" />
	<meta http-equiv="content-language" content="fr_FR" />
	<meta name="language" content="fr_FR" />
	<meta name="google" content="notranslate" />
	<meta property="og:title" content="Title" />
	<meta property="og:type" content="music.album" />
	<meta property="og:url" content="https://site.com" />
	<meta property="og:description" content="Description to display" />
	<meta property="og:image" content="https://site.com/images/index.jpg" />
	<meta property="og:image:secure_url" content="https://site.com/images/index.jpg" />
	<meta property="og:image:width" content="666" />
	<meta property="og:image:height" content="666" />
	<meta property="og:image:type" content="image/jpeg">
	<meta property="og:audio" content="https://site.com/audio/teaser.mp3" />
	<meta property="og:audio:url" content="https://site.com/audio/teaser.mp3" />
	<meta property="og:audio:secure_url" content="site.com/audio/teaser.mp3">
	<meta property="og:audio:type" content="audio/mpeg">	
	<meta property="fb:app_id" content="facebook app id" />

	<link rel="icon" type="image/jpeg" href="images/index.jpg" />
	<link rel="manifest" href="/manifest.json">
	<link href="https://fonts.googleapis.com/css?family=Gorditas" rel="stylesheet"> 
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="bigseaadam.css" />
	<style type="text/css">
		body {	
			font-family:'Gorditas';
			color: gold; 
			background-color: black;
			}
		h1 {font-size: 2.5em; text-align: center}
		h2 {background-color: rgba(255,255,0,0.5); color:red;}
		li {list-style-type: none; color: gold; display:none;font-size: 2.5em; text-align: center}
		a:link {color: gold;}
		a:visited {color: red;} 
		a:active {color: white;}
	/*	a {color: gold; text-decoration: none;}  */
	/*	a:hover {background-color: yellow; color: red;} */
	/*	.hilite {display:block;}						*/
		.material-icons.big { font-size: 8em;}
	</style>
</head>

<body>
<div id="wrapper">
<h1>Band name</h1>
<div class="controls">
	
	<div id="bars">
							<div class="bar"></div>
							<div class="bar"></div>
							<div class="bar"></div>
							<div class="bar"></div>
							<div class="bar"></div>
							<div class="bar"></div>
							<div class="bar"></div>
							<div class="bar"></div>
							<div class="bar"></div>
							<div class="bar"></div>
	</div>
	
<a id="play" title="Plays a random song" href="#" onclick="next();return false;"><i class="material-icons big">skip_next</i></a>
<a id="pause" title="Pauses the music" href="#" onclick="pause();return false;"><i class="material-icons big">pause</i></a>
  </div>
<img id='id3artwork' width=120px>&nbsp;&nbsp;<span id="id3title" style="font-size: 2em"></span>
	<li><a href="audio/Strawberries need rain (1797)/07-Grand'Ma.mp3" download>Grand'Ma</a></li>
<audio><source src="audio/Strawberries need rain (1797)/07-Grand'Ma.mp3" type="audio/mpeg">
This browser doesn't support mp3 playing : install firefox !</audio>
<li><a href="audio/Strawberries need rain (1797)/12-Wilk.mp3" download>Wilk</a></li>
<audio><source src="audio/Strawberries need rain (1797)/12-Wilk.mp3" type="audio/mpeg">
This browser doesn't support mp3 playing : install firefox !</audio>
</ol>
<li><a href="audio/To grow up (1899)/05 San Ku Kai (la guerre).mp3" download>San Ku Kai (la guerre)</a></li>
<audio><source src="audio/To grow up (1899)/05 San Ku Kai (la guerre).mp3" type="audio/mpeg">
This browser doesn't support mp3 playing : install firefox !</audio>
</ol>
<li><a href="audio/Tour de l'Europe (2004)/03-Scorpio.mp3" download>Scorpio</a></li>
<audio><source src="audio/Tour de l'Europe (2004)/03-Scorpio.mp3" type="audio/mpeg">
This browser doesn't support mp3 playing : install firefox !</audio>
</ol>
<p>Share the music with your friends :
<style type="text/css">
/* gen your own btn set from https://sharingbuttons.io/     */

.resp-sharing-button__link, .resp-sharing-button__icon {display: inline-block}
.resp-sharing-button__link  {text-decoration: none;  color: #fff;  margin: 0.5em}
.resp-sharing-button    {border-radius: 5px; transition: 25ms ease-out; padding: 0.5em 0.75em; font-family: Arial,sans-serif }
.resp-sharing-button__icon svg  {width: 1em;  height: 1em;  margin-right: 0.4em;  vertical-align: top}
.resp-sharing-button--small svg {margin: 0;  vertical-align: middle}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {stroke: #fff;  fill: none}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {fill: #fff;  stroke: none}

.resp-sharing-button--twitter {background-color: #55acee}
.resp-sharing-button--twitter:hover {background-color: #2795e9}

.resp-sharing-button--pinterest {background-color: #bd081c}
.resp-sharing-button--pinterest:hover {background-color: #8c0615}

.resp-sharing-button--facebook {background-color: #3b5998}
.resp-sharing-button--facebook:hover {background-color: #2d4373}

.resp-sharing-button--tumblr {background-color: #35465C}
.resp-sharing-button--tumblr:hover {background-color: #222d3c}

.resp-sharing-button--reddit {background-color: #5f99cf}
.resp-sharing-button--reddit:hover {background-color: #3a80c1}

.resp-sharing-button--google {background-color: #dd4b39}
.resp-sharing-button--google:hover {background-color: #c23321}

.resp-sharing-button--email {  background-color: #777}
.resp-sharing-button--email:hover {background-color: #5e5e5e}

.resp-sharing-button--whatsapp {background-color: #25D366}
.resp-sharing-button--whatsapp:hover {background-color: #1da851}
    
</style>
<!-- https://sharingbuttons.io/  -->
<div></div>

<!-- Sharingbutton E-Mail -->
<div id="footer">
<div class="sharebuttons">
<a class="resp-sharing-button__link" href="mailto:?subject=Listen%20to%20this%20amazing%20music&amp;body=https%3A%2F%2Forg.github.io/band" target="_self" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Facebook -->
<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Forg.github.io/band/" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Twitter -->
<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=Listen%20to%20this%20amazing%20music&amp;url=https%3A%2F%2Forg.github.io/band/" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Google+ -->
<a class="resp-sharing-button__link" href="https://plus.google.com/share?url=https%3A%2F%2Forg.github.io/band/"  target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.37 12.93c-.73-.52-1.4-1.27-1.4-1.5 0-.43.03-.63.98-1.37 1.23-.97 1.9-2.23 1.9-3.57 0-1.22-.36-2.3-1-3.05h.5c.1 0 .2-.04.28-.1l1.36-.98c.16-.12.23-.34.17-.54-.07-.2-.25-.33-.46-.33H7.6c-.66 0-1.34.12-2 .35-2.23.76-3.78 2.66-3.78 4.6 0 2.76 2.13 4.85 5 4.9-.07.23-.1.45-.1.66 0 .43.1.83.33 1.22h-.08c-2.72 0-5.17 1.34-6.1 3.32-.25.52-.37 1.04-.37 1.56 0 .5.13.98.38 1.44.6 1.04 1.84 1.86 3.55 2.28.87.23 1.82.34 2.8.34.88 0 1.7-.1 2.5-.34 2.4-.7 3.97-2.48 3.97-4.54 0-1.97-.63-3.15-2.33-4.35zm-7.7 4.5c0-1.42 1.8-2.68 3.9-2.68h.05c.45 0 .9.07 1.3.2l.42.28c.96.66 1.6 1.1 1.77 1.8.05.16.07.33.07.5 0 1.8-1.33 2.7-3.96 2.7-1.98 0-3.54-1.23-3.54-2.8zM5.54 3.9c.33-.38.75-.58 1.23-.58h.05c1.35.05 2.64 1.55 2.88 3.35.14 1.02-.08 1.97-.6 2.55-.32.37-.74.56-1.23.56h-.03c-1.32-.04-2.63-1.6-2.87-3.4-.13-1 .08-1.92.58-2.5zM23.5 9.5h-3v-3h-2v3h-3v2h3v3h2v-3h3"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Tumblr -->
<a class="resp-sharing-button__link" href="https://www.tumblr.com/widgets/share/tool?posttype=link&amp;title=Listen%20to%20this%20amazing%20music&amp;caption=Listen%20to%20this%20amazing%20music&amp;content=https%3A%2F%2Forg.github.io/band&amp;canonicalUrl=https%3A%2F%2Forg.github.io/band&amp;shareSource=tumblr_share_button" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--tumblr resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5.5v5h5v4h-5V15c0 5 3.5 4.4 6 2.8v4.4c-6.7 3.2-12 0-12-4.2V9.5h-3V6.7c1-.3 2.2-.7 3-1.3.5-.5 1-1.2 1.4-2 .3-.7.6-1.7.7-3h3.8z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Pinterest -->
<a class="resp-sharing-button__link" href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Forg.github.io/band&amp;media=https%3A%2F%2Forg.github.io/band&amp;description=Listen%20to%20this%20amazing%20music" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--pinterest resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.14.5C5.86.5 2.7 5 2.7 8.75c0 2.27.86 4.3 2.7 5.05.3.12.57 0 .66-.33l.27-1.06c.1-.32.06-.44-.2-.73-.52-.62-.86-1.44-.86-2.6 0-3.33 2.5-6.32 6.5-6.32 3.55 0 5.5 2.17 5.5 5.07 0 3.8-1.7 7.02-4.2 7.02-1.37 0-2.4-1.14-2.07-2.54.4-1.68 1.16-3.48 1.16-4.7 0-1.07-.58-1.98-1.78-1.98-1.4 0-2.55 1.47-2.55 3.42 0 1.25.43 2.1.43 2.1l-1.7 7.2c-.5 2.13-.08 4.75-.04 5 .02.17.22.2.3.1.14-.18 1.82-2.26 2.4-4.33.16-.58.93-3.63.93-3.63.45.88 1.8 1.65 3.22 1.65 4.25 0 7.13-3.87 7.13-9.05C20.5 4.15 17.18.5 12.14.5z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton Reddit -->
<a class="resp-sharing-button__link" href="https://reddit.com/submit/?url=https%3A%2F%2Forg.github.io/band" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--reddit resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 11.5c0-1.65-1.35-3-3-3-.96 0-1.86.48-2.42 1.24-1.64-1-3.75-1.64-6.07-1.72.08-1.1.4-3.05 1.52-3.7.72-.4 1.73-.24 3 .5C17.2 6.3 18.46 7.5 20 7.5c1.65 0 3-1.35 3-3s-1.35-3-3-3c-1.38 0-2.54.94-2.88 2.22-1.43-.72-2.64-.8-3.6-.25-1.64.94-1.95 3.47-2 4.55-2.33.08-4.45.7-6.1 1.72C4.86 8.98 3.96 8.5 3 8.5c-1.65 0-3 1.35-3 3 0 1.32.84 2.44 2.05 2.84-.03.22-.05.44-.05.66 0 3.86 4.5 7 10 7s10-3.14 10-7c0-.22-.02-.44-.05-.66 1.2-.4 2.05-1.54 2.05-2.84zM2.3 13.37C1.5 13.07 1 12.35 1 11.5c0-1.1.9-2 2-2 .64 0 1.22.32 1.6.82-1.1.85-1.92 1.9-2.3 3.05zm3.7.13c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9.8 4.8c-1.08.63-2.42.96-3.8.96-1.4 0-2.74-.34-3.8-.95-.24-.13-.32-.44-.2-.68.15-.24.46-.32.7-.18 1.83 1.06 4.76 1.06 6.6 0 .23-.13.53-.05.67.2.14.23.06.54-.18.67zm.2-2.8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm5.7-2.13c-.38-1.16-1.2-2.2-2.3-3.05.38-.5.97-.82 1.6-.82 1.1 0 2 .9 2 2 0 .84-.53 1.57-1.3 1.87z"/></svg>
    </div>
  </div>
</a>

<!-- Sharingbutton WhatsApp -->
<a class="resp-sharing-button__link" href="whatsapp://send?text=Listen%20to%20this%20amazing%20music:%20https%3A%2F%2Forg.github.io/band" target="_blank" aria-label="">
  <div class="resp-sharing-button resp-sharing-button--whatsapp resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6-1.6c1.6.9 3.5 1.3 5.4 1.3 6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5 1 1-3.4L4 17c-1-1.5-1.4-3.2-1.4-5.1 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.5 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1s-1.2-.5-2.3-1.4c-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6s.3-.3.4-.5c.2-.1.3-.3.4-.5.1-.2 0-.4 0-.5C10 9 9.3 7.6 9 7c-.1-.4-.4-.3-.5-.3h-.6s-.4.1-.7.3c-.3.3-1 1-1 2.4s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.3-.3-.4-.6-.5z"/></svg>
    </div>
  </div>
  </div>
</a>
</p>
<p>
	Download <a href="https://github.com/archive/master.zip">all tracks</a><br>
	<a class="contact" href="mailto:contact@site.com?subject=contact">Write</a> to the band<br>
	<a class="cc" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr"><img src="https://licensebuttons.net/l/by-nc-sa/3.0/88x31.png"></a>
</p>
</div>
</div>

<script type="text/javascript" src="musicmetadata.min.js"></script>
	
<script type="text/javascript">
var curTrack = -1;

// https://github.com/leetreveil/musicmetadata
// fetch/xhr loads whole file to read id3
// better use https://github.com/aadsm/jsmediatags ?

function showMetaData(data) {
    musicmetadata(data, function (err, result) {
    if (err) throw err;
 //   console.log(result);
    if (result.picture.length > 0) {
      var picture = result.picture[0];
      var url = URL.createObjectURL(new Blob([picture.data], {'type': 'image/' + picture.format}));
      var image = document.getElementById('id3artwork');
      var body = document.getElementsByTagName('body')[0];
	  //  body.style.backgroundImage = 'url('+url+')';
      image.src = url;

    }
	// 2do : display filename if no id3
    var title = document.getElementById('id3title');
	title.innerHTML = result.title;
//    var div = document.getElementById('info');
//    div.innerText = JSON.stringify(result, undefined, 2);
  });
}

function fetchFile(url) {
if (self.fetch) {
	fetch(url)
	.then(function(response) {
	  return response.arrayBuffer();
	})
	.then(function(ab) {
		showMetaData(ab);
	})
	.catch(function(){
		console.log("fetch failed");
		xhrFile(url);
	});
}
else {
	xhrFile(url);
}

} 

function xhrFile(url){
  var xhr = new XMLHttpRequest();
  xhr.responseType = "arraybuffer";
  xhr.open("get", url, true);
  xhr.onload = function(e) {
    showMetaData(e.target.response);
  }  
  xhr.onerror = function() {
    console.log("xhr failed");
  }
  xhr.send();
}

function pause(){
	var audios = document.getElementsByTagName('audio');
	var visualizer = document.getElementById('bars');
	if (songPlaying()<0){ 
		if (curTrack<0) next();
		else audios[curTrack].play();
	}
	else{ 
		audios[curTrack].pause();
		visualizer.classList.remove('playing');
	}
}

function songPlaying() {
	var playing = -1;
	var audios = document.getElementsByTagName('audio');
	for(var i = 0, len = audios.length; i < len;i++){
		if (!audios[i].paused) playing = i;
		
	}
	return playing;
}

function next(){
    var audios = document.getElementsByTagName('audio');
    var len= audios.length;
    var nTrack = (curTrack + Math.floor(Math.random() * (len-1) )+1)%len;


    if (songPlaying()<0 && curTrack>=0) {		// continues paused playing
    	audios[curTrack].play();
    	// console.log(curTrack);
    }
    else {
        audios[nTrack].currentTime=0;	
    	audios[nTrack].play();					// starts random track
    	curTrack = nTrack;
     	// console.log(nTrack, len);
    }
}

/* Stops all others players when play */	
document.addEventListener('play', function(e){
	var visualizer = document.getElementById('bars');
    var audios = document.getElementsByTagName('audio');
    var titles = document.getElementsByTagName('li');
    for(var i = 0, len = audios.length; i < len;i++){
        titles[i].classList.remove("hilite");
        if(audios[i] != e.target){
            audios[i].pause();
            visualizer.classList.add('playing');
        }
        else {
        	// console.log(titles[i].innerHTML);
        	titles[i].classList.add("hilite");
        	// console.log(e.target.currentSrc);
        	// console.log(audios[i].currentSrc)
        	fetchFile(audios[i].currentSrc);
        
        }
    }
}, true);

/* Starts next player when one song has ended 
	without resetting time to zero*/
document.addEventListener('ended', function(e){
    var audios = document.getElementsByTagName('audio');
    var visualizer = document.getElementById('bars');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] == e.target){
        	var nTrack = (i + Math.floor(Math.random() * (len-1) )+1)%len;
            console.log(nTrack, len);
            audios[nTrack].play();
        }
    }
}, true);

/* empty SW for add to homescreen prompt on android devices */
if ('serviceWorker' in navigator) {
  console.log("Will service worker register?");
  navigator.serviceWorker.register('service-worker.js').then(function(reg){
    console.log("Yes it did.");
  }).catch(function(err) {
    console.log("No it didn't. This happened: ", err)
  });
}
</script>
</body>

